<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import {
  Card,
  Divider,
  Descriptions,
  DescriptionsItem,
  Image,
} from 'ant-design-vue';
import { ref, onMounted, watch } from 'vue';
import type { DingdEmployeeInfoApi } from '#/api/moxi/dingdemployeeinfo';

const deptInfo = ref<DingdEmployeeInfoApi.DingdEmployeeInfo>({});

// const props = defineProps({
//   data: {
//     type: Object,
//     default: 0,
//   },
// });

// watch(
//   () => props.data,
//   async (data) => {
//     if (data) {
//       deptInfo.value = props.data;
//       console.log(333, deptInfo.value);
//     }
//   },
// );

// 定义 props 接收 id
const props = defineProps<{
  data?: any;
}>();
// 监听 id 变化，当 id 传入时执行相关逻辑
watch(
  () => props.data,
  async (data) => {
    if (data) {
      deptInfo.value = props.data;
      console.log('接收到的 data:', data);
    }
  },
  { immediate: true },
);
</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">员工信息</span>
          </div>
        </template>
        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-2 text-xl font-medium">基础信息:</span>
        </div>
        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工姓名">{{
            deptInfo?.name
          }}</DescriptionsItem>
          <DescriptionsItem label="头像">
            <Image
                    class="float-left h-10 w-10"
                    v-if="deptInfo?.avatar"
                    :src="deptInfo?.avatar"
                  />
            <!-- <a-avatar size="large" :src="deptInfo?.avatar" /> -->
          </DescriptionsItem>
          <!-- <DescriptionsItem label="性别">{{ deptInfo?.sex }}</DescriptionsItem> -->
          <DescriptionsItem label="工号">{{
            deptInfo?.jobNumber
          }}</DescriptionsItem>
          <DescriptionsItem label="部门名称">{{
            deptInfo?.deptNames
          }}</DescriptionsItem>
          <DescriptionsItem label="岗位职称">{{
            deptInfo?.title
          }}</DescriptionsItem>
          <DescriptionsItem label="手机号码">{{
            deptInfo?.mobile
          }}</DescriptionsItem>
          <DescriptionsItem label="电子邮箱">{{
            deptInfo?.email
          }}</DescriptionsItem>
          <!-- <DescriptionsItem label="员工类型">{{
            deptInfo?.empType
          }}</DescriptionsItem> -->
          <!-- <DescriptionsItem label="工作公司">{{
            deptInfo?.workComp
          }}</DescriptionsItem> -->
          <!-- <DescriptionsItem label="身份证号码">{{
            deptInfo?.idCard
          }}</DescriptionsItem> -->
          <!-- <DescriptionsItem label="上级负责人">{{
            deptInfo?.managerName
          }}</DescriptionsItem> -->
        </Descriptions>

        <!-- <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">工作状态:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工状态">{{
            deptInfo?.empStatus
          }}</DescriptionsItem>
          <DescriptionsItem label="入职日期">{{
            deptInfo?.contractSignDate
          }}</DescriptionsItem>
          <DescriptionsItem label="试用期">{{
            deptInfo?.probationPeriod
          }}</DescriptionsItem>
          <DescriptionsItem label="转正日期">{{
            deptInfo?.regulaDate
          }}</DescriptionsItem>
          <DescriptionsItem label="司龄开始日期">{{
            deptInfo?.companyAgeStartDate
          }}</DescriptionsItem>
          <DescriptionsItem label="司龄">{{
            deptInfo?.companyAge
          }}</DescriptionsItem>
        </Descriptions>

        <div class="mb-2 flex items-center rounded-lg p-3">
          <div>
            <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
          </div>
          <span class="mr-4 text-xl font-medium">合同:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="合同编号">{{
            deptInfo?.contractCode
          }}</DescriptionsItem>
          <DescriptionsItem label="合同状态">{{
            deptInfo?.contractStatus
          }}</DescriptionsItem>
          <DescriptionsItem label="合同类型">
            {{ deptInfo?.contractType }}
          </DescriptionsItem>
          <DescriptionsItem label="合同开始日期">{{
            deptInfo?.contractStart
          }}</DescriptionsItem>
          <DescriptionsItem label="合同结束日期">{{
            deptInfo?.contractEnd
          }}</DescriptionsItem>
          <DescriptionsItem label="合同状态">{{
            deptInfo?.contractStatus
          }}</DescriptionsItem>
          <DescriptionsItem label="合同公司">{{
            deptInfo?.contractComp
          }}</DescriptionsItem>
          <DescriptionsItem label="合同有效期">{{
            deptInfo?.contractValidPeriod
          }}</DescriptionsItem>
          <DescriptionsItem label="合同签订日期">{{
            deptInfo?.contractSignDate
          }}</DescriptionsItem>
        </Descriptions> -->
      </Card>
    </div>
  </Page>
</template>
